<template>
  <view class="captcha-container" @click="refreshCode">
    <canvas class="captcha-canvas" :canvas-id="canvasId"></canvas>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

const props = defineProps({
  codeLength: {
    type: Number,
    default: 4
  },
  canvasWidth: {
    type: Number,
    default: 100 // 增加宽度以容纳更多字符
  },
  canvasHeight: {
    type: Number,
    default: 30
  },
  fontSizeMin: {
    type: Number,
    default: 26
  },
  fontSizeMax: {
    type: Number,
    default: 32
  },
  lineCount: {
    type: Number,
    default: 6
  },
  dotCount: {
    type: Number,
    default: 10
  },
  code: {
    type: String,
    default: '1234'
  }
})

const emits = defineEmits(['refresh'])

const canvasId = ref('captchaCanvas' + Math.random().toString(36).substr(2, 9))
const code = ref(props.code)

// 生成随机验证码
const generateCode = () => {
  let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
  let result = ''
  for (let i = 0; i < props.codeLength; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  return result
}

// 获取随机颜色
const getRandomColor = (min, max) => {
  const r = Math.floor(Math.random() * (max - min + 1)) + min
  const g = Math.floor(Math.random() * (max - min + 1)) + min
  const b = Math.floor(Math.random() * (max - min + 1)) + min
  return `rgb(${r},${g},${b})`
}

// 绘制验证码图片
const drawCanvas = () => {
  const ctx = uni.createCanvasContext(canvasId.value)
  
  // 清除画布
  ctx.clearRect(0, 0, props.canvasWidth, props.canvasHeight)
  
  // 绘制背景
  ctx.fillStyle = getRandomColor(240, 255)
  ctx.fillRect(0, 0, props.canvasWidth, props.canvasHeight)
  
  // 绘制干扰线
  for (let i = 0; i < props.lineCount; i++) {
    ctx.strokeStyle = getRandomColor(40, 180)
    ctx.beginPath()
    ctx.moveTo(
      Math.random() * props.canvasWidth,
      Math.random() * props.canvasHeight
    )
    ctx.lineTo(
      Math.random() * props.canvasWidth,
      Math.random() * props.canvasHeight
    )
    ctx.stroke()
  }
  
  // 绘制干扰点
  for (let i = 0; i < props.dotCount; i++) {
    ctx.fillStyle = getRandomColor(0, 255)
    ctx.beginPath()
    ctx.arc(
      Math.random() * props.canvasWidth,
      Math.random() * props.canvasHeight,
      1, 0, 2 * Math.PI
    )
    ctx.fill()
  }
  
  // 绘制验证码字符
  const charSpace = (props.canvasWidth - 30) / props.codeLength // 计算字符间距
  
  for (let i = 0; i < code.value.length; i++) {
    const char = code.value.charAt(i)
    const fontSize = Math.floor(Math.random() * (props.fontSizeMax - props.fontSizeMin + 1)) + props.fontSizeMin
    const x = 2 + i * charSpace + Math.random() * 8 // 使用计算的间距
    const y = props.canvasHeight / 2 + fontSize / 2 - Math.random() * 5
    
    ctx.font = `bold ${fontSize}px Arial`
    ctx.fillStyle = getRandomColor(50, 160)
    
    // 随机旋转
    ctx.save()
    ctx.translate(x, y)
     ctx.rotate(Math.random() * 0.4 - 0.2) // -15° 到 15°
    ctx.fillText(char, 0, 0)
    ctx.restore()
  }
  
  ctx.draw()
}

// 刷新验证码
const refreshCode = () => {
  drawCanvas()
  emits('refresh', code.value)
}

// 组件挂载后初始化
onMounted(() => {
  refreshCode()
})

// 向外提供当前验证码值
const currentCode = computed(() => code.value.toLowerCase())

</script>

<style scoped>
.captcha-container {
  width: 160px;
  height: 30px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.captcha-canvas {
  width: 100%;
  height: 100%;
}
</style>